<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>CSS3 生成器</title>
		<link rel="stylesheet" href="css/uikit.min.css"/>
		<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.1/css/all.min.css"/>
		<link rel="stylesheet" href="css/CSSGenerator.css"/>
		<style type="text/css" id="CSSGeneratorStyleTag"></style>
	</head>
	<body style="margin: auto;">

		<div class="uk-container uk-container-center">

			<div class="uk-grid uk-grid-small">

				<div class="uk-width-1-1">

					<a href="#help-modal" class="uk-float-right help-icon" data-uk-modal>
						<img src="img/help.png" />
					</a>

					<!--<a href="#options-modal" class="uk-float-right help-icon" data-uk-modal>
						<img src="img/cog.png" />
					</a>-->

					<h1><img src="img/icon-38.png"/> CSS3 生成器</h1>

				</div>

			</div>

			<div class="uk-grid uk-grid-small">

				<div class="uk-width-1-1">

					<ul class="uk-tab main-list">
						<li class="uk-active">
							<a href="#text-shadow" title="Create text shadow" data-function="CSSGenerator.SetTextShadow" data-index="0">文字阴影</a>
						</li>
						<li>
							<a href="#rgba-converter" title="Convert hexadecimal/rgba" data-function="CSSGenerator.SetRGBHex" data-index="1">Hex/RGBA</a>
						</li>
						<li>
							<a href="#box-model" title="Box model CSS" data-index="2">盒模型</a>
						</li>
						<!--
						<li>
							<a href="#transforms" title="Create transforms" data-function="CSSGenerator.SetTransforms">Transforms</a>
						</li>
						<li>
							<a href="#border-radius" title="Create border radius" data-function="CSSGenerator.SetBorderRadius">Border Radius</a>
						</li>
						<li>
							<a href="#box-shadow" title="Create box shadow" data-function="CSSGenerator.SetBoxShadow">Box Shadow</a>
						</li>
						-->
						<li>
							<a href="#columns" title="Create columns" data-function="CSSGenerator.SetColumns" data-index="3">文字列宽</a>
						</li>
						<li>
							<a href="#gradients" title="Create gradients" data-index="4">渐变色</a>
						</li>
						<li>
							<a href="#arrows" title="Create CSS3 arrows" data-function="CSSGenerator.SetArrow" data-index="5">箭头</a>
						</li>
						<li>
							<a href="#transitions" title="Create transitions" data-function="CSSGenerator.SetTransitions" data-index="6">过渡</a>
						</li>
						<li>
							<a href="#filters" title="Create filters" data-function="CSSGenerator.SetFilters" data-index="7">滤镜</a>
						</li>
					</ul>

					<ul id="generator-switcher" class="uk-switcher">

						<li class="uk-active">

							<div class="uk-grid uk-grid-small">

								<div class="uk-width-1-2">

									<div class="uk-panel uk-panel-box uk-panel-box-primary uk-panel-header">

										<h2 class="uk-panel-title">文字阴影</h2>

										<div class="CSSGeneratorExample">

											<div id="CSSGeneratorTextShadow">Your Text Shadow<br>你的文字阴影</div>

										</div>

									</div>

								</div>

								<div class="uk-width-1-2">

									<button title="添加阴影" id="CSSTextShadowAdd" class="uk-button uk-button-success uk-button-small uk-float-right"><i class="fa fa-plus"></i></button>

									<ul id="CSSTextShadowList" class="uk-tab sub-list" data-list="text_shadow_switcher">
									</ul>

									<ul id="text_shadow_switcher" class="uk-switcher">
									</ul>

								</div>

							</div>

						</li>

						<li>

							<div class="uk-grid uk-grid-small">

								<div class="uk-width-1-1">

									<div class="uk-panel uk-panel-box uk-panel-box-primary uk-panel-header">

										<h2 class="uk-panel-title">Hex &lt;-&gt; RGBA Converter</h2>

										<form method="post" action="" class="uk-form">

											<fieldset>

												<div class="uk-grid">

													<div class="uk-width-1-3">

														<div class="uk-form-row">
															<label class="uk-form-label" for="CSSRGBAHex">十六进制(Hex):</label>
															<div class="uk-form-controls">
																<input type="text" id="CSSRGBAHex" />
															</div>
														</div>

													</div>

													<div class="uk-width-1-3">

														<div class="uk-form-row">
															<label class="uk-form-label" for="CSSRGBAOpacity">RGBa:</label>
															<div class="uk-form-controls">
																<strong>R:</strong> <input type="text" id="CSSRGBAR" class="uk-form-width-mini" />
																<strong>G:</strong> <input type="text" id="CSSRGBAG" class="uk-form-width-mini" />
																<strong>B:</strong> <input type="text" id="CSSRGBAB" class="uk-form-width-mini" />
															</div>
														</div>

													</div>

													<div class="uk-width-1-3">

														<div class="uk-form-row">
															<label class="uk-form-label" for="CSSRGBAOpacity">透明度(Opacity):</label>
															<div class="uk-form-controls">
																<input type="range" min="0" max="1" step="0.1" id="CSSRGBAOpacity" />
															</div>
														</div>

													</div>

												</div>

												<div class="uk-grid">

													<div class="uk-width-1-3">

														<div class="uk-form-row">
															<label class="uk-form-label" for="CSSRGBOutput">RGB:</label>
															<div class="uk-form-controls">
																<input type="text" readonly="true" id="CSSRGBOutput" class="uk-width-1-1" />
															</div>
														</div>

													</div>

													<div class="uk-width-1-3">

														<div class="uk-form-row">
															<label class="uk-form-label" for="CSSRGBAOutput">RGBa:</label>
															<div class="uk-form-controls">
																<input type="text" readonly="true" id="CSSRGBAOutput" class="uk-width-1-1" />
															</div>
														</div>

													</div>

													<div class="uk-width-1-3">

														<div class="uk-form-row">
															<label class="uk-form-label" for="CSSRGBAColour">颜色:</label>
															<div class="uk-form-controls demo-bg">
																<input type="text" readonly="true" id="CSSRGBAColour" class="uk-width-1-1" />
															</div>
														</div>

													</div>

												</div>

											</fieldset>

										</form>

									</div>

								</div>

							</div>

						</li>

						<li>

							<div class="uk-grid uk-grid-small">

								<div class="uk-width-1-1">

									<ul class="uk-tab sub-list" data-list="box_switcher">
										<li class="uk-active">
											<a href="#transforms" title="Create transforms" data-function="CSSGenerator.SetTransforms" data-index="0">变换</a>
										</li>
										<li>
											<a href="#border-radius" title="Create border radius" data-function="CSSGenerator.SetBorderRadius" data-index="1">边框</a>
										</li>
										<li>
											<a href="#box-shadow" title="Create box shadow" data-function="CSSGenerator.SetBoxShadow" data-index="2">盒子阴影</a>
										</li>
									</ul>

									<ul id="box_switcher" class="uk-switcher">

										<li class="uk-active">

											<div class="uk-grid uk-grid-small">

												<div class="uk-width-1-2">

													<div class="uk-panel uk-panel-box uk-panel-box-primary uk-panel-header">

														<h2 class="uk-panel-title">变换</h2>

														<div class="CSSGeneratorExample">

															<div id="CSSGeneratorTransforms">
																<div id="CSSGeneratorTransformsBox"></div>
															</div>

														</div>

													</div>

												</div>

												<div class="uk-width-1-2">

													<div class="uk-panel uk-panel-box">

														<form method="post" action="" class="uk-form">

															<fieldset>

																<div class="uk-grid">

																	<div class="uk-width-1-2">

																		<div class="uk-form-row">
																			<label class="uk-form-label" for="CSSTransformsRotate">旋转:</label>
																			<div class="uk-form-controls">
																				<input type="range" min="0" max="360" id="CSSTransformsRotate" class="uk-width-1-1" />
																			</div>
																		</div>

																		<hr/>

																		<div class="uk-form-row">
																			<label class="uk-form-label" for="CSSTransformsScaleX">比例 X:</label>
																			<div class="uk-form-controls">
																				<input type="range" min="0" max="2" step="0.1" id="CSSTransformsScaleX" class="uk-width-1-1" />
																			</div>
																		</div>

																		<div class="uk-form-row">
																			<label class="uk-form-label" for="CSSTransformsScaleY">比例 Y:</label>
																			<div class="uk-form-controls">
																				<input type="range" min="0" max="2" step="0.1" id="CSSTransformsScaleY" class="uk-width-1-1" />
																			</div>
																		</div>

																	</div>

																	<div class="uk-width-1-2">

																		<div class="uk-form-row">
																			<label class="uk-form-label" for="CSSTransformsSkewX">斜面 X:</label>
																			<div class="uk-form-controls">
																				<input type="range" min="-180" max="180" id="CSSTransformsSkewX" class="uk-width-1-1" />
																			</div>
																		</div>

																		<div class="uk-form-row">
																			<label class="uk-form-label" for="CSSTransformsSkewX">斜面 Y:</label>
																			<div class="uk-form-controls">
																				<input type="range" min="-180" max="180" id="CSSTransformsSkewY" class="uk-width-1-1" />
																			</div>
																		</div>

																		<hr/>

																		<div class="uk-form-row">
																			<label class="uk-form-label" for="CSSTransformsTranslateX">偏移 X:</label>
																			<div class="uk-form-controls">
																				<input type="range" min="-200" max="200" id="CSSTransformsTranslateX" class="uk-width-1-1" />
																			</div>
																		</div>

																		<div class="uk-form-row">
																			<label class="uk-form-label" for="CSSTransformsTranslateY">偏移 Y:</label>
																			<div class="uk-form-controls">
																				<input type="range" min="-200" max="200" id="CSSTransformsTranslateY" class="uk-width-1-1" />
																			</div>
																		</div>

																	</div>

																</div>

															</fieldset>

														</form>

													</div>

												</div>

											</div>

										</li>

										<li>

											<div class="uk-grid uk-grid-small">

												<div class="uk-width-1-2">

													<div class="uk-panel uk-panel-box uk-panel-box-primary uk-panel-header">

														<h2 class="uk-panel-title">边框</h2>

														<div class="CSSGeneratorExample">

															<div id="CSSGeneratorBorderRadius">
																<div id="CSSGeneratorBorderRadiusBox"></div>
															</div>

														</div>

													</div>

												</div>

												<div class="uk-width-1-2">

													<div class="uk-panel uk-panel-box">

														<form method="post" action="" class="uk-form">

															<fieldset>

																<div class="uk-form-row">
																	<label class="uk-form-label" for="CSSBorderRadiusTopLeft">左上:</label>
																	<div class="uk-form-controls">
																		<input type="range" min="0" max="200" value="0" id="CSSBorderRadiusTopLeft" /> <input type="text" class="help-inline CSSGeneratorHelper CSSHelper" data-type="px"/>
																	</div>
																</div>

																<div class="uk-form-row">
																	<label class="uk-form-label" for="CSSBorderRadiusTopRight">右上:</label>
																	<div class="uk-form-controls">
																		<input type="range" min="0" max="200" value="0" id="CSSBorderRadiusTopRight" /> <input type="text" class="help-inline CSSGeneratorHelper CSSHelper" data-type="px"/>
																	</div>
																</div>

																<div class="uk-form-row">
																	<label class="uk-form-label" for="CSSBorderRadiusBottomRight">右下:</label>
																	<div class="uk-form-controls">
																		<input type="range" min="0" max="200" value="0" id="CSSBorderRadiusBottomRight" /> <input type="text" class="help-inline CSSGeneratorHelper CSSHelper" data-type="px"/>
																	</div>
																</div>

																<div class="uk-form-row">
																	<label class="uk-form-label" for="CSSBorderRadiusBottomLeft">左下:</label>
																	<div class="uk-form-controls">
																		<input type="range" min="0" max="200" value="0" id="CSSBorderRadiusBottomLeft" /> <input type="text" class="help-inline CSSGeneratorHelper CSSHelper" data-type="px"/>
																	</div>
																</div>

																<div class="uk-form-row">
																	<label class="uk-form-label" for="CSSBorderRadiusColour">边框颜色:</label>
																	<div class="uk-form-controls">
																		<input type="text" id="CSSBorderRadiusColour" class="color" value="000000" />
																	</div>
																</div>

															</fieldset>

														</form>

													</div>

												</div>

											</div>

										</li>

										<li>

											<div class="uk-grid uk-grid-small">

												<div class="uk-width-1-2">

													<div class="uk-panel uk-panel-box uk-panel-box-primary uk-panel-header">

														<h2 class="uk-panel-title">盒子阴影</h2>

														<div class="CSSGeneratorExample">

															<div id="CSSGeneratorBoxShadow">
																<div id="CSSGeneratorBoxShadowBox"></div>
															</div>

														</div>

													</div>

												</div>

												<div class="uk-width-1-2">

													<button title="添加阴影" id="CSSBoxShadowAdd" class="uk-button uk-button-success uk-button-small uk-float-right"><i class="fa fa-plus"></i></button>

													<ul id="CSSBoxShadowList" class="uk-tab sub-list" data-list="box_shadow_switcher">
													</ul>

													<ul id="box_shadow_switcher" class="uk-switcher">
													</ul>

												</div>

											</div>

										</li>

									</ul>

								</div>

							</div>

						</li>

						<li>

							<div class="uk-grid uk-grid-small">

								<div class="uk-width-2-3">

									<div class="uk-panel uk-panel-box uk-panel-box-primary uk-panel-header">

										<h2 class="uk-panel-title">CSS 文字列宽(Columns)</h2>

										<div class="CSSGeneratorExample">

											<div id="CSSGeneratorColumns">
												
												<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, quae, eos optio ut dicta nemo dolore dolor labore numquam sit beatae rerum corporis illo voluptas neque explicabo perspiciatis officiis tenetur ducimus ad incidunt veritatis fuga consequuntur architecto perferendis a reiciendis distinctio modi repellendus odit illum quas in fugit tempora sequi culpa mollitia voluptatem minus soluta molestiae laborum commodi maiores officia magnam delectus sint! Soluta, ipsam, incidunt, sint nobis dolore sapiente facilis iusto est perferendis dolorum culpa nostrum quos officia excepturi tenetur unde nemo eos architecto optio doloremque a animi molestias odio ab fugiat?一只敏捷的棕色狐狸跳过一只懒惰的狗</p>

											</div>

										</div>

									</div>

								</div>

								<div class="uk-width-1-3">

									<ul class="uk-tab sub-list" data-list="columns_switcher">
										<li class="uk-active">
											<a href="" data-index="0">生成</a>
										</li>
										<li>
											<a href="" data-index="1">关于</a>
										</li>
									</ul>

									<ul id="columns_switcher" class="uk-switcher">

										<li class="uk-active">

											<div class="uk-panel uk-panel-box">

												<form method="post" action="" class="uk-form">

													<fieldset>

														<div class="uk-form-row">
															<label class="uk-form-label" for="CSSTextColumnCount">列数Columns:</label>
															<div class="uk-form-controls">
																<input type="range" min="1" max="4" id="CSSTextColumnCount" /> <input type="text" class="help-inline CSSGeneratorHelper CSSHelper"/>
															</div>
														</div>

														<div class="uk-form-row">
															<label class="uk-form-label" for="CSSTextColumnGap">列间隙:</label>
															<div class="uk-form-controls">
																<input type="range" min="0" max="30" id="CSSTextColumnGap" /> <input type="text" class="help-inline CSSGeneratorHelper CSSHelper"/>
															</div>
														</div>

														<div class="uk-form-row">
															<label class="uk-form-label" for="CSSTextShadowBlurRadius">分隔符</label>
															<div class="uk-form-controls">
																<select id="CSSTextColumnRule">
																	<option value="">None(无)</option>
																	<option value="dotted">Dotted(星罗棋布)</option>
																	<option value="dashed">Dashed(虚线)</option>
																	<option value="solid">Solid(实线)</option>
																	<option value="double">Double(双线)</option>
																	<option value="groove">Groove</option>
																	<option value="ridge">Ridge</option>
																	<option value="outset">Outset</option>
																</select>
															</div>
														</div>

													</fieldset>

												</form>

											</div>

										</li>

										<li>

											<div class="uk-panel uk-panel-box uk-panel-header">

												<h3 class="uk-panel-title">关于 Columns</h3>

												<p>CSS列是为您的内容创建“报纸样式”布局的非常简单的方法。有一些可用选项，包括列数，列间距和列之间的规则样式。</p>

												<p>Internet Explorer（10+）和Opera支持无供应商前缀的CSS多列布局，因此您只需要-webkit-和-moz-的前缀版本。</p>

											</div>

										</li>

									</ul>

								</div>

							</div>

						</li>
						<li>

							<div class="uk-grid uk-grid-small">

								<div class="uk-width-1-1">

									<ul class="uk-tab sub-list" data-list="gradient_switcher">
										<li class="uk-active">
											<a href="#linear-gradient" title="Create linear gradient" data-function="CSSGenerator.SetLinearGradient" data-index="0">线型</a>
										</li>
										<li>
											<a href="#radial-gradient" title="Create radial gradient" data-function="CSSGenerator.SetRadialGradient" data-index="1">光线型</a>
										</li>
										<li>
											<a href="#striped-gradient" title="Create striped gradient" data-function="CSSGenerator.SetStripedGradient" data-index="2">斑纹</a>
										</li>
									</ul>

									<ul id="gradient_switcher" class="uk-switcher">

										<li class="uk-active">

											<div class="uk-grid uk-grid-small">

												<div class="uk-width-1-2">

													<div class="uk-panel uk-panel-box uk-panel-box-primary uk-panel-header">

														<h2 class="uk-panel-title">线型渐变</h2>

														<div class="CSSGeneratorExample nopadding">

															<div id="CSSGeneratorLinearGradient"></div>

														</div>

													</div>

												</div>

												<div class="uk-width-1-2">

													<div class="uk-panel uk-panel-box">

														<form method="post" action="" class="uk-form">

															<fieldset id="CSSGeneratorLinearGradientForm">

																<div class="uk-form-row">
																	<label class="uk-form-label" for="CSSTextGradientLinearAngle">角度:</label>
																	<div class="uk-form-controls">
																		<input type="range" min="0" max="360" id="CSSTextGradientLinearAngle" /> <input type="text" class="help-inline CSSGeneratorHelper CSSTextGradientHelper CSSTextDegrees"/>
																	</div>
																</div>

															</fieldset>

															<fieldset>

																<div class="uk-form-row">
																	<div class="uk-form-controls">
																		<a href="" class="uk-button uk-button-primary" id="CSSGeneratorLinearGradientAdd">添加停止值</a>
																	</div>
																</div>

															</fieldset>

														</form>

													</div>

												</div>

											</div>

										</li>

										<li>

											<div class="uk-grid uk-grid-small">

												<div class="uk-width-1-2">

													<div class="uk-panel uk-panel-box uk-panel-box-primary uk-panel-header">

														<h2 class="uk-panel-title">光线型渐变</h2>

														<div class="CSSGeneratorExample nopadding">

															<div id="CSSGeneratorRadialGradient"></div>

														</div>

													</div>

												</div>

												<div class="uk-width-1-2">

													<div class="uk-panel uk-panel-box">

														<form method="post" action="" class="uk-form">

															<fieldset>

																<div class="uk-grid">

																	<div class="uk-width-1-2">

																		<div class="uk-form-row">
																			<label class="uk-form-label" for="CSSTextGradientRadialType">类型:</label>
																			<div class="uk-form-controls">
																				<select id="CSSTextGradientRadialType">
																					<option value="circle">圆形</option>
																					<option value="ellipse">椭圆形</option>
																				</select>
																			</div>
																		</div>

																	</div>

																	<div class="uk-width-1-2">

																		<div class="uk-form-row">
																			<label class="uk-form-label" for="CSSTextGradientRadialSize">大小:</label>
																			<div class="uk-form-controls">
																				<select id="CSSTextGradientRadialSize">
																					<option value="contain">Contain(容纳)</option>
																					<option value="closest-corner">Closest Corner(最近的角落)</option>
																					<option value="farthest-side">Farthest Side(最远的边)</option>
																					<option value="cover">Cover(覆盖)</option>
																				</select>
																			</div>
																		</div>

																	</div>

																</div>

																<div class="uk-grid">

																	<div class="uk-width-1-1" id="CSSGeneratorRadialGradientForm">

																		<div class="uk-form-row">
																			<label class="uk-form-label" for="CSSTextGradientRadialX">X 位置:</label>
																			<div class="uk-form-controls">
																				<input type="range" min="0" max="100" id="CSSTextGradientRadialX" /> <input type="text" class="help-inline CSSGeneratorHelper CSSTextGradientHelper CSSTextDegrees"/>
																			</div>
																		</div>

																		<div class="uk-form-row">
																			<label class="uk-form-label" for="CSSTextGradientRadialY">Y 位置:</label>
																			<div class="uk-form-controls">
																				<input type="range" min="0" max="100" id="CSSTextGradientRadialY" /> <input type="text" class="help-inline CSSGeneratorHelper CSSTextGradientHelper CSSTextDegrees"/>
																			</div>
																		</div>

																	</div>

																</div>

															</fieldset>

															<fieldset>

																<div class="uk-form-row">
																	<div class="uk-form-controls">
																		<a href="" class="uk-button uk-button-primary" id="CSSGeneratorRadialGradientAdd">添加停止值</a>
																	</div>
																</div>

															</fieldset>

														</form>

													</div>

												</div>

											</div>

										</li>

										<li>

											<div class="uk-grid uk-grid-small">

												<div class="uk-width-1-2">

													<div class="uk-panel uk-panel-box uk-panel-box-primary uk-panel-header">

														<h2 class="uk-panel-title">斑纹渐变</h2>

														<div class="CSSGeneratorExample nopadding">

															<div id="CSSGeneratorStripedGradient"></div>

														</div>

													</div>

												</div>

												<div class="uk-width-1-2">

													<div class="uk-panel uk-panel-box">

														<form method="post" action="" class="uk-form">

															<fieldset id="CSSGeneratorStripedGradientForm">

																<div class="uk-form-row">
																	<label class="uk-form-label" for="CSSTextGradientStripedAngle">角度:</label>
																	<div class="uk-form-controls">
																		<input type="range" min="0" max="360" id="CSSTextGradientStripedAngle" /> <input type="text" class="help-inline CSSGeneratorHelper CSSTextGradientHelper CSSTextDegrees"/>
																	</div>
																</div>

															</fieldset>

															<fieldset>

																<div class="uk-form-row">
																	<div class="uk-form-controls">
																		<a href="" class="uk-button uk-button-primary" id="CSSGeneratorStripedGradientAdd">添加停止值</a>
																	</div>
																</div>

															</fieldset>

														</form>

													</div>

												</div>

											</div>

										</li>

									</ul>

								</div>

							</div>

						</li>
						<li>

							<div class="uk-grid uk-grid-small">

								<div class="uk-width-1-2">

									<div class="uk-panel uk-panel-box uk-panel-box-primary uk-panel-header">

										<h2 class="uk-panel-title">CSS 箭头</h2>

										<div class="CSSGeneratorExample">

											<div id="CSSGeneratorArrow"></div>

										</div>

									</div>

								</div>

								<div class="uk-width-1-2">

									<ul class="uk-tab sub-list" data-list="css_arrow_switcher">
										<li class="uk-active">
											<a href="" data-index="0">生成</a>
										</li>
										<li>
											<a href="" data-index="1">关于</a>
										</li>
									</ul>

									<ul id="css_arrow_switcher" class="uk-switcher">

										<li class="uk-active">

											<div class="uk-panel uk-panel-box">

												<form method="post" action="" class="uk-form">

													<fieldset>

														<div class="uk-grid">

															<div class="uk-width-1-1">

																<div class="uk-form-row">
																	<label class="uk-form-label" for="CSSTextArrowPosition">位置:</label>
																	<div class="uk-form-controls">
																		<select id="CSSTextArrowPosition">
																			<option value="topright">上方靠右</option>
																			<option value="top">上方居中</option>
																			<option value="topleft">上方靠左</option>
																			<option value="lefttop">左方靠上</option>
																			<option value="left">左方居中</option>
																			<option value="leftbottom">左方靠底</option>
																			<option value="bottomleft">底部靠左</option>
																			<option value="bottom">底部居中</option>
																			<option value="bottomright">底部靠右</option>
																			<option value="rightbottom">右方靠底</option>
																			<option value="right">右方居中</option>
																			<option value="righttop">右方靠上</option>
																		</select>
																	</div>
																</div>

															</div>

														</div>

														<div class="uk-grid">

															<div class="uk-width-1-3">

																<div class="uk-form-row">
																	<label class="uk-form-label" for="CSSTextArrowBackground">背景:</label>
																	<div class="uk-form-controls">
																		<input type="text" id="CSSTextArrowBackground" class="color" />
																	</div>
																</div>

																<div class="uk-form-row">
																	<label class="uk-form-label" for="CSSTextArrowBorderColor">边框颜色:</label>
																	<div class="uk-form-controls">
																		<input type="text" id="CSSTextArrowBorderColor" class="color" />
																	</div>
																</div>

															</div>

															<div class="uk-width-2-3">

																<div class="uk-form-row">
																	<label class="uk-form-label" for="CSSTextArrowSize">箭头大小:</label>
																	<div class="uk-form-controls">
																		<input type="range" min="1" max="50" id="CSSTextArrowSize" /> <input type="text" class="help-inline CSSGeneratorHelper CSSHelper" data-type="px"/>
																	</div>
																</div>

																<div class="uk-form-row">
																	<label class="uk-form-label" for="CSSTextArrowBorderWidth">边框宽度</label>
																	<div class="uk-form-controls">
																		<input type="range" min="0" max="10" id="CSSTextArrowBorderWidth" /> <input type="text" class="help-inline CSSGeneratorHelper  CSSHelper" data-type="px"/>
																	</div>
																</div>

															</div>

														</div>

														<div class="uk-grid">

															<div class="uk-width-1-1">

																<div class="uk-form-row">
																	<label class="uk-form-label" for="CSSTextArrowOffset">微调:</label>
																	<div class="uk-form-controls">
																		<input type="range" min="0" max="100" id="CSSTextArrowOffset" /> <input type="text" class="help-inline CSSGeneratorHelper  CSSHelper" data-type="px"/>
																	</div>
																</div>

															</div>

														</div>

													</fieldset>

												</form>

											</div>

										</li>

										<li>

											<div class="uk-panel uk-panel-box uk-panel-header">

												<h3 class="uk-panel-title">About CSS 箭头</h3>

												<p>这是关于如何使用：before和：after伪元素来创建诸如工具提示之类的用法的简单箭头，或使内容的一部分引用另一部分的演示。</p>

												<p>我正在寻找进一步的选择，以使用纯CSS创建其他各种形状。</p>

											</div>

										</li>

									</ul>

								</div>

							</div>

						</li>
						<li>

							<div class="uk-grid uk-grid-small">

								<div class="uk-width-1-2">

									<div class="uk-panel uk-panel-box uk-panel-box-primary uk-panel-header">

										<h2 class="uk-panel-title">过渡动画</h2>

										<div class="CSSGeneratorExample">

											<div id="CSSGeneratorTransitions">
												<div id="CSSGeneratorTransitionBox">你的动画</div>
											</div>

										</div>

										<p>将鼠标悬停在元素上以查看过渡</p>

									</div>

								</div>

								<div class="uk-width-1-2">

									<ul class="uk-tab sub-list" data-list="transition_switcher">
										<li class="uk-active">
											<a href="#position-transition" data-index="0">位置</a>
										</li>
										<li>
											<a href="#edges-transition" data-index="1">边缘</a>
										</li>
										<li>
											<a href="#colors-transition" data-index="2">颜色</a>
										</li>
										<li>
											<a href="#easing-transition" data-index="3">速度</a>
										</li>
									</ul>

									<ul id="transition_switcher" class="uk-switcher">

										<li class="uk-active">

											<div class="uk-panel uk-panel-box">

												<form method="post" action="" class="uk-form transition-form">

													<fieldset>

														<div class="uk-form-row">
															<label class="uk-form-label" for="CSSTextTransitionTopActive">顶部:</label>
															<div class="uk-form-controls">
																<label class="label-checkbox small uk-float-left CSSTransitionCheckbox" data-transition="top" data-ls-key="positions">
																	<input type="checkbox" class="checkbox-small" id="CSSTextTransitionTopActive" />
																</label>
																<input type="range" min="0" max="100" class="CSSTextTransitionAmount" />
																<input type="text" class="help-inline CSSGeneratorHelper CSSHelper" data-type="px"/>
															</div>
														</div>

														<div class="uk-form-row">
															<label class="uk-form-label" for="CSSTextTransitionRightActive">右方:</label>
															<div class="uk-form-controls">
																<label class="label-checkbox small uk-float-left CSSTransitionCheckbox" data-transition="right" data-ls-key="positions">
																	<input type="checkbox" class="checkbox-small" id="CSSTextTransitionRightActive" />
																</label>
																<input type="range" min="0" max="100" class="CSSTextTransitionAmount" />
																<input type="text" class="help-inline CSSGeneratorHelper CSSHelper" data-type="px"/>
															</div>
														</div>

														<div class="uk-form-row">
															<label class="uk-form-label" for="CSSTextTransitionBottomActive">底部:</label>
															<div class="uk-form-controls">
																<label class="label-checkbox small uk-float-left CSSTransitionCheckbox" data-transition="bottom" data-ls-key="positions">
																	<input type="checkbox" class="checkbox-small" id="CSSTextTransitionBottomActive" />
																</label>
																<input type="range" min="0" max="100" class="CSSTextTransitionAmount" />
																<input type="text" class="help-inline CSSGeneratorHelper CSSHelper" data-type="px"/>
															</div>
														</div>

														<div class="uk-form-row">
															<label class="uk-form-label" for="CSSTextTransitionLeftActive">左方:</label>
															<div class="uk-form-controls">
																<label class="label-checkbox small uk-float-left CSSTransitionCheckbox" data-transition="left" data-ls-key="positions">
																	<input type="checkbox" class="checkbox-small" id="CSSTextTransitionLeftActive" />
																</label>
																<input type="range" min="0" max="100" class="CSSTextTransitionAmount" />
																<input type="text" class="help-inline CSSGeneratorHelper CSSHelper" data-type="px"/>
															</div>
														</div>

													</fieldset>

												</form>

											</div>

										</li>

										<li>

											<div class="uk-panel uk-panel-box">

												<form method="post" action="" class="uk-form transition-form">

													<fieldset>

														<div class="uk-form-row">
															<label class="uk-form-label" for="CSSTextTransitionPaddingActive">填充:</label>
															<div class="uk-form-controls">
																<label class="label-checkbox small uk-float-left CSSTransitionCheckbox" data-transition="padding" data-ls-key="marpads">
																	<input type="checkbox" class="checkbox-small" id="CSSTextTransitionPaddingActive" />
																</label>
																<input type="range" min="0" max="100" class="CSSTextTransitionAmount" />
																<input type="text" class="help-inline CSSGeneratorHelper CSSHelper" data-type="px"/>
															</div>
														</div>

														<div class="uk-form-row">
															<label class="uk-form-label" for="CSSTextTransitionMarginActive">外边距:</label>
															<div class="uk-form-controls">
																<label class="label-checkbox small uk-float-left CSSTransitionCheckbox" data-transition="margin" data-ls-key="marpads">
																	<input type="checkbox" class="checkbox-small" id="CSSTextTransitionMarginActive" />
																</label>
																<input type="range" min="0" max="100" class="CSSTextTransitionAmount" />
																<input type="text" class="help-inline CSSGeneratorHelper CSSHelper" data-type="px"/>
															</div>
														</div>

														<div class="uk-form-row">
															<label class="uk-form-label" for="CSSTextTransitionBorderWidthActive">边框宽度:</label>
															<div class="uk-form-controls">
																<label class="label-checkbox small uk-float-left CSSTransitionCheckbox" data-transition="border-width" data-ls-key="marpads">
																	<input type="checkbox" class="checkbox-small" id="CSSTextTransitionBorderWidthActive" />
																</label>
																<input type="range" min="0" max="100" class="CSSTextTransitionAmount" />
																<input type="text" class="help-inline CSSGeneratorHelper CSSHelper" data-type="px"/>
															</div>
														</div>

														<div class="uk-form-row">
															<label class="uk-form-label" for="CSSTextTransitionBorderRadiusActive">圆角(边框半径):</label>
															<div class="uk-form-controls">
																<label class="label-checkbox small uk-float-left CSSTransitionCheckbox" data-transition="border-radius" data-ls-key="marpads">
																	<input type="checkbox" class="checkbox-small" id="CSSTextTransitionBorderRadiusActive" />
																</label>
																<input type="range" min="0" max="100" class="CSSTextTransitionAmount" />
																<input type="text" class="help-inline CSSGeneratorHelper CSSHelper" data-type="px"/>
															</div>
														</div>

													</fieldset>

												</form>

											</div>

										</li>

										<li>

											<div class="uk-panel uk-panel-box">

												<form method="post" action="" class="uk-form transition-form">

													<fieldset>

														<div class="uk-form-row">
															<label class="uk-form-label" for="CSSTextTransitionColorActive">颜色:</label>
															<div class="uk-form-controls">
																<label class="label-checkbox small uk-float-left CSSTransitionCheckbox" data-transition="color" data-ls-key="colors">
																	<input type="checkbox" class="checkbox-small" id="CSSTextTransitionColorActive" />
																</label>
																<input type="text" class="color CSSTextTransitionColor" />
															</div>
														</div>

														<div class="uk-form-row">
															<label class="uk-form-label" for="CSSTextTransitionBackgroundColorActive">背景颜色:</label>
															<div class="uk-form-controls">
																<label class="label-checkbox small uk-float-left CSSTransitionCheckbox" data-transition="background-color" data-ls-key="colors">
																	<input type="checkbox" class="checkbox-small" id="CSSTextTransitionBackgroundColorActive" />
																</label>
																<input type="text" class="color CSSTextTransitionColor" />
															</div>
														</div>

														<div class="uk-form-row">
															<label class="uk-form-label" for="CSSTextTransitionBorderColorActive">边框颜色:</label>
															<div class="uk-form-controls">
																<label class="label-checkbox small uk-float-left CSSTransitionCheckbox" data-transition="border-color" data-ls-key="colors">
																	<input type="checkbox" class="checkbox-small" id="CSSTextTransitionBorderColorActive" />
																</label>
																<input type="text" class="color CSSTextTransitionColor" />
															</div>
														</div>

													</fieldset>

												</form>

											</div>

										</li>

										<li>

											<div class="uk-panel uk-panel-box">

												<form method="post" action="" class="uk-form transition-form">

													<fieldset>

														<div class="uk-form-row">
															<label class="uk-form-label" for="CSSTextTransitionEasing">动画速度:</label>
															<div class="uk-form-controls">
																<select id="CSSTextTransitionEasing">
																	<option value="ease">Ease(缓慢)</option>
																	<option value="linear">Linear(直线式)</option>
																	<option value="ease-in">Ease In(缓入)</option>
																	<option value="ease-out">Ease Out(缓出)</option>
																	<option value="ease-in-out">Ease In Out(缓入缓出)</option>
																	<option value="cubic-bezier">Cubic Bezier(贝塞尔曲线)</option>
																</select>
															</div>
														</div>

														<div id="CSSTextTransitionBeziers" class="uk-form-row">
															<label class="uk-form-label" for="CSSTextTransitionBezier1">Cubic Bezier(贝塞尔曲线):</label>
															<div class="uk-form-controls">
																<div class="uk-grid uk-grid-small">
																	<div class="uk-width-1-4">
																		<input type="text" class="uk-width-1-1 CSSTextCubicBezier" />
																	</div>
																	<div class="uk-width-1-4">
																		<input type="text" class="uk-width-1-1 CSSTextCubicBezier" />
																	</div>
																	<div class="uk-width-1-4">
																		<input type="text" class="uk-width-1-1 CSSTextCubicBezier" />
																	</div>
																	<div class="uk-width-1-4">
																		<input type="text" class="uk-width-1-1 CSSTextCubicBezier" />
																	</div>
																</div>
															</div>
														</div>

													</fieldset>

												</form>

											</div>

										</li>

									</ul>

									<hr/>

									<div class="uk-panel uk-panel-box">

										<form method="post" action="" class="uk-form transition-form">

											<fieldset>

												<div class="uk-form-row">
													<label class="uk-form-label" for="CSSTextTransitionDuration">动画时长:</label>
													<div class="uk-form-controls">
														<input type="range" min="0.1" max="5" step="0.1" id="CSSTextTransitionDuration" />
														<input type="text" class="help-inline CSSGeneratorHelper  CSSHelper" data-type="seconds"/>
													</div>
												</div>

											</fieldset>

										</form>

									</div>

								</div>

							</div>

						</li>
						<li>

							<div class="uk-grid uk-grid-small">

								<div class="uk-width-1-2">

									<div class="uk-panel uk-panel-box uk-panel-box-primary uk-panel-header">

										<h2 class="uk-panel-title">滤镜</h2>

										<div class="CSSGeneratorExample">

											<div id="CSSGeneratorFilters">
												<img src="img/demo.jpg" class="uk-margin-bottom" />
												<h2>标头示例</h2>
												<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, suscipit, animi recusandae aliquam enim facere accusantium amet nam modi iure hic tenetur inventore totam sit aperiam nihil dolorum tempora repellendus.一只敏捷的棕色狐狸跳过一只懒惰的狗</p>
											</div>

										</div>

									</div>

								</div>

								<div class="uk-width-1-2">

									<ul class="uk-tab sub-list" data-list="filter_switcher">
										<li class="uk-active">
											<a href="#standard-filters" data-index="0">主要滤镜</a>
										</li>
										<li>
											<a href="#dropshadow-filter" data-index="1">投影</a>
										</li>
									</ul>

									<ul id="filter_switcher" class="uk-switcher">

										<li class="uk-active">

											<div class="uk-panel uk-panel-box">

												<form method="post" action="" class="uk-form">

													<fieldset>

														<div class="uk-form-row">
															<label class="uk-form-label" for="CSSTextFilterGrayscale">Grayscale(灰度):</label>
															<div class="uk-form-controls">
																<input type="range" min="0" max="1" step="0.1" id="CSSTextFilterGrayscale" />
																<input type="text" class="help-inline CSSGeneratorHelper CSSHelper"/>
															</div>
														</div>

														<div class="uk-form-row">
															<label class="uk-form-label" for="CSSTextFilterSepia">Sepia(褐色):</label>
															<div class="uk-form-controls">
																<input type="range" min="0" max="1" step="0.1" id="CSSTextFilterSepia" />
																<input type="text" class="help-inline CSSGeneratorHelper CSSHelper"/>
															</div>
														</div>

														<div class="uk-form-row">
															<label class="uk-form-label" for="CSSTextFilterBlur">Blur(模糊):</label>
															<div class="uk-form-controls">
																<input type="range" min="0" max="10" id="CSSTextFilterBlur" />
																<input type="text" class="help-inline CSSGeneratorHelper CSSHelper" data-type="px"/>
															</div>
														</div>

														<div class="uk-form-row">
															<label class="uk-form-label" for="CSSTextFilterBrightness">Brightness(亮度):</label>
															<div class="uk-form-controls">
																<input type="range" min="0" max="200" step="10" id="CSSTextFilterBrightness" />
																<input type="text" class="help-inline CSSGeneratorHelper CSSHelper" data-type="perc"/>
															</div>
														</div>

														<div class="uk-form-row">
															<label class="uk-form-label" for="CSSTextFilterHueRotate">Hue Rotate(色调):</label>
															<div class="uk-form-controls">
																<input type="range" min="0" max="360" step="10" id="CSSTextFilterHueRotate" />
																<input type="text" class="help-inline CSSGeneratorHelper CSSHelper"/>
															</div>
														</div>

													</fieldset>

												</form>

											</div>

										</li>

										<li>

											<div class="uk-panel uk-panel-box">

												<form method="post" action="" class="uk-form">

													<fieldset>

														<a href="" id="CSSTextFilterDropShadow" class="uk-button uk-button-primary uk-float-right">Toggle</a>

														<div class="uk-form-row">
															<label class="uk-form-label" for="CSSTextFilterHorizontal">水平偏移：</label>
															<div class="uk-form-controls">
																<input type="range" min="-75" max="75" id="CSSTextFilterHorizontal" /> <input type="text" class="help-inline CSSGeneratorHelper CSSHelper" data-type="px"/>
															</div>
														</div>

														<div class="uk-form-row">
															<label class="uk-form-label" for="CSSTextFilterVertical">垂直偏移：</label>
															<div class="uk-form-controls">
																<input type="range" min="-75" max="75" id="CSSTextFilterVertical" /> <input type="text" class="help-inline CSSGeneratorHelper CSSHelper" data-type="px"/>
															</div>
														</div>

														<div class="uk-form-row">
															<label class="uk-form-label" for="CSSTextFilterBlurRadius">模糊半径:</label>
															<div class="uk-form-controls">
																<input type="range" min="0" max="50" id="CSSTextFilterBlurRadius" /> <input type="text" class="help-inline CSSGeneratorHelper CSSHelper" data-type="px"/>
															</div>
														</div>

														<div class="uk-form-row">
															<label class="uk-form-label" for="CSSTextFilterBlurColor">颜色:</label>
															<div class="uk-form-controls">
																<input type="text" id="CSSTextFilterBlurColor" class="color" value="000000" />
															</div>
														</div>

													</fieldset>

												</form>

											</div>

										</li>

									</ul>

								</div>

							</div>

						</li>
					</ul>

				</div>

			</div>

			<div class="uk-grid uk-grid-small">

				<div class="uk-width-1-1">

					<div class="uk-panel uk-panel-box uk-panel-box-secondary">

						<pre><code id="CSSGeneratorOutput"></code></pre>

					</div>

				</div>

			</div>

		</div>

		<!-- This is the modal -->
		<div id="help-modal" class="uk-modal">
			<div class="uk-modal-dialog">
			<a class="uk-modal-close uk-close"></a>

				<h1>关于 CSS3 生成器</h1>

				<div class="uk-grid uk-grid-small">

					<div class="uk-width-1-2">

						<div class="uk-panel uk-panel-box uk-panel-header">

							<h2 class="uk-panel-title">升级日志</h2>

							<h3>版本  V1.0.4</h3>

							<ul class="uk-list-space">
								<li>令人讨厌的是，Chrome中发生了一些更改，这意味着更改值不会在滑块值更改时触发，而是在mouseup事件触发时触发。滑块将更新值，但仅在您放开鼠标时才会更新。</li>
								<li>更新了RGBa&lt; - &gt;转换器，以便RGB值更新十六进制。CSS很快就会有一个变化，它可能会在十六进制值中增加两个字符的不透明度。如果这个被发布我会更新的。</li>
								<li>还将RGBa的alpha部分添加到示例颜色。现在，当您向颜色添加更多的alpha（不透明度）时，它将消失。</li>
								<li>现在可以将框阴影设置为插图。</li>
								<li>一些错误修复和优化。</li>
								<p>(谷歌直译)</p>
							</ul>

							<!--

							<h3>Version 1.0.3</h3>

							<ul class="uk-list-space">
								<li>Added multiple shadow options for <strong>text shadow</strong>
									<ul>
										<li>You can now have more than one text shadow</li>
										<li>You can now add opacity to text shadow (will convert from hexadecimal to rgba when less than 1 opacity)</li>
									</ul>
								</li>
								<li>Added multiple shadow options for <strong>box shadow</strong>
									<ul>
										<li>You can now have more than one box shadow</li>
										<li>You can now add opacity to box shadow (will convert from hexadecimal to rgba when less than 1 opacity)</li>
									</ul>
								</li>
								<li>Added a new gradient option for <strong>striped gradients</strong>. As well as linear gradients you can have <strong>repeating linear gradients</strong>, which are great for creating stripes. The default settings show you how this might work.</li>
								<li>Removed border radius from box shadow option as it's not exactly helping anything (if you prefer the option leave feedback and I'll add it back in).</li>
								<li>Couple of bug fixes with tabs not auto-selecting the previously selected and some code updates to make things a little faster and more streamlined.</li>
							</ul>

							<h3>Version 1.0.1</h3>

							<ul>
								<li>Added transitions tab with three sub tabs.
									<ul>
										<li><strong>Position:</strong> Animate the top, right, bottom and left position.</li>
										<li><strong>Edges:</strong> Animate the edges (margins, padding, etc).</li>
										<li><strong>Colors:</strong> Animate various colors (background, border, etc).</li>
										<li><strong>Easing:</strong> Set the easing option (including custom beziers!).</li>
									</ul>
								</li>
								<li>Added filters tab with two sub tabs
									<ul>
										<li><strong>Main Filters:</strong> The set of filters not requiring a bunch of options</li>
										<li><strong>Drop Shadow:</strong> Requires a few options so put in a separate tab</li>
									</ul>
								</li>
								<li>Moved <strong>transforms</strong>, <strong>border radius</strong> and <strong>box shadow</strong> to their own tab now called <strong>Box Model</strong> for space saving and brevity.</li>
								<li>Started adding some information/help guides for some of the CSS3 properties.</li>
								<li>Couple of bug fixes, especially where some tabs weren't working correctly.</li>
								<li>Some code fixes and optimisation. Spending too long looking at code makes for bad code.</li>
							</ul>

							<h3>Version 1.0.0</h3>

							<ul>
								<li>First release of the extension. Currently contains CSS3 generation for:
									<ul>
										<li>Text Shadow</li>
										<li>Hex/RGBA</li>
										<li>Transforms</li>
										<li>Border Radius</li>
										<li>Box Shadow</li>
										<li>Columns</li>
										<li>Gradients</li>
										<li>Arrows (for tooltips etc)</li>
									</ul>
								</li>
							</ul>

							-->

						</div>

					</div>

					<div class="uk-width-1-2">

						<div class="uk-panel uk-panel-box uk-panel-box-primary uk-panel-header">

							<h2 class="uk-panel-title">感谢您使用 CSS3 生成器!</h2>

							<h3>即将来袭</h3>

							<ul>
								<li>新的颜色模式，包括将所有颜色设置为特定类型（例如，十六进制，RGB（a），HSL）的选项。</li>
								<li>动画！ （包括3D，变换，翻译和所有这些好东西）。</li>
								<li>有关各种属性的更多帮助指南和信息。</li>
								<li>您还有什么想看的！请留下反馈。</li>
							</ul>

							<h3>捐助(原版)</h3>

							<p>此扩展是由以下用户精心创建的 <a href="https://twitter.com/ahallicks">亚历克斯·霍尔(Alex Hall)</a>, 他单枪匹马地花费了数小时的代码来为您创建精巧的CSS带来更轻松的时间。</p>
                            <p>简体中文版本翻译 by <a href="https://wr0926.ml">Wei Ran</a>(@wr20060926)</p>
							<div class="uk-panel uk-panel-box uk-panel-box-white uk-panel-header">

								<h4 class="uk-panel-title">uikit(UI框架)</h4>

								<p>扩展的主题是由 <a href="http://www.getuikit.com/index.html">uikit</a>: 一个非常好的和编写良好的CSS框架构成的。</p>

							</div>

						</div>

					</div>

				</div>
			</div>
		</div>

		<!-- This is the modal -->
		<div id="options-modal" class="uk-modal">
			<div class="uk-modal-dialog">
			<a class="uk-modal-close uk-close"></a>
				<h1>CSS3 生成器配置</h1>
			</div>
		</div>
		
		<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<script type="text/javascript" src="js/uikit.min.js"></script>
		<script type="text/javascript" src="js/jscolor/jscolor.js"></script>
		<script type="text/javascript" src="js/CSSGenerator.js"></script>
	</body>
</html>